<template>
	<view class="select-supervisor">
		<navBar :title="orderTitle" @goBack="uni.navigateBack()"></navBar>
		<view style="height: 30rpx;background-color:#f5f7fa ;"></view>
		<view class="search">
			<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord"
				placeholder="請輸入病害編號" :showAction="false" :clearabled="false" height="88upx" />
		</view>
		<scroll-view scroll-y
			:style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			<view style="height: 100%;">
				<view class="form" style="padding: 20rpx 0;" v-for="(item,index) in filteredData" :key="index">
					<view>
						<view style="height: 30rpx;background-color:#f5f7fa ;" v-if="index != 0"></view>
						<view style="font-weight: 600;font-size: 36rpx;color: #445469;margin: 16rpx 30rpx;">{{ item.orderNo }}</view>
						<view class="form-item none">
							<view class="label">所屬項目:{{ pmName || '' }}</view>
						</view>
						<view class="form-item none">
							<view class="label">病害位置:{{ item.location || '' }}</view>
						</view>
						<view class="form-item none">
							<view class="label">歷程:{{ item.subLocation || '' }}
								<view class="icon">{{  item.priority || ''}}</view>
							</view>
						</view>
						<view class="form-item none">
							<view class="label">
								<view class="form-text" style="max-width: 650rpx;">病害描述:{{ item.defectDescription }}</view>
							</view>
						</view>
						<view class="form-item none" style="padding-bottom: 20rpx;">
							<view class="label">病害編號:{{ item.defectNo || '' }}</view>
						</view>
						<view class="form-item none" style="padding-bottom: 20rpx;">
							<view class="form-content">
								<view class="form-btn" v-if="item.diseaseRepairState !== 'ywx'" @click.stop="diseaseSplit(item)">病害拆分</view>
								<view v-if="!(item.child && item.child.length) && !item.repairTaskId" class="form-btn" style="margin-left: 30rpx;" @click.stop="goRepair(item)">維修填報</view>
								<view v-if="!(item.child && item.child.length) && item.repairTaskId" class="form-btn" style="margin-left: 30rpx;" @click.stop="lookDetail(item)">維修详情</view>
							</view>
						</view>
					</view>
					<view v-if="item.child && item.child.length">
						<view class="form-item dash" v-for="(item2, index2) in item.child" :key="item2.id">
							<view style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
								<view class="label">{{ item2.defectNo }}-{{item2.state }}</view>
								<view class="form-content">
									<view class="">
										<view v-if="item2.planRepairDiseaseId && !item2.repairTaskId" class="form-btn" @click.stop="goRepair(item,item2)">維修填報</view>
										<view v-if="item2.planRepairDiseaseId && item2.repairTaskId" class="form-btn" @click.stop="lookDetail(item2)">維修详情</view>
									</view>
									<view v-if="!item2.planRepairDiseaseId" class="form-text" style="color:#FF6A6A ;" @click.stop="$u.debounce(deleteDiseaseOrder(item2), 1000)">删除</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<u-modal :show="showModal"  title="提示" confirmText="確定" cancelText="取消" :showCancelButton="true" confirmColor="#2F80ED"
		cancelColor="#FF6A6A"
		@confirm="$u.debounce(sureSplit, 1000)"
		@cancel="showModal = false">
			<view class="slot-content">
				<u-icon name="info-circle-fill" color="#ffba00" size="25" :customStyle="{marginRight:'20rpx'}"></u-icon>
				<text >確認拆分嗎？確認後將以拆分后的病害進行維修</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { hkRepairPlan_getDetails, hkDiseaseOrder_diseaseResolution, hkDiseaseOrder_delete } from "@/api/HongKong/hkAttendanceSheet.js";	
	export default {
		name: "select-diseases",
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				list: [],
				showModal:false,
				orderTitle:'',
				id:undefined,
				planRepairDisease:undefined,
				orderType:'',
				pmName:'',
				bringInfo:{},
				loading:false
			}
		},
		computed: {
			...mapGetters(['dictMap']),
			filteredData() {
				return this.list.filter((p)=>{
					return p.defectNo && p.defectNo.indexOf(this.searchForm.keyWord) !==-1
				})
				// return this.list
			}
		},
		mounted() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('getDetailsInfo', async (item) => {
				this.bringInfo = item.data
				this.pmName = item.data.pmName
				this.orderTitle = item.data.orderNo
				this.orderType = item.data.orderType
				this.id = item.data.id
				const testList = await this.getDetailInfo(item.data.id)
				this.list = this.listToTree(testList)
				console.log(this.list, '树形')
				console.log(item, 'getDetailsInfo数据')
			})
			this.eventChannel = eventChannel
			this.initContainerData();
		},
		async onLoad(op) {
			if(op && op.id) {
				const testList = await this.getDetailInfo(op.id)
				this.list = this.listToTree(testList)
			}
		},
		methods: {
			listToTree(data) {
				// * 先生成parent建立父子关系
				const obj = {}
				data.forEach(item => {
					obj[item.id] = item
				})
				const parentList = []
				data.forEach(item => {
					const parent = obj[item.parentId]
					if (parent) {
						// * 当前项有父节点
						parent.child = parent.child || []
						parent.child.push(item)
					} else {
						// * 当前项没有父节点 -> 顶层
						parentList.push(item)
					}
				})
				return parentList
			},
			goRepair(obj,obj2) {
				console.log(obj, obj2)
				// return
				obj.orderType = this.orderType
				obj.pmName = this.pmName
				if(obj2) {
					obj.planRepairDiseaseId = obj2.planRepairDiseaseId
				}
				if(this.bringInfo) {
					obj.repairDate = this.bringInfo.repairDate
				}
				uni.navigateTo({
					url:`/subpackage-enginner/pages/engineeringMaintenance/hongKong/diseaseRepair`,
					success: (res) => {
						res.eventChannel.emit('sendFormInfo', {
							data:obj
						})
					}
				})
			},
			lookDetail(obj) {
				if(!obj.repairTaskId) return
				console.log(obj, 'look')
				if(this.bringInfo) {
					obj.orderType = this.bringInfo.orderType
					obj.pmName = this.bringInfo.pmName
				}
				uni.navigateTo({
					url:`/subpackage-enginner/pages/engineeringMaintenance/hongKong/diseaseRepair?id=${obj.repairTaskId}&pmName=${obj.pmName}&orderType=${obj.orderType}&taskStateName=${!obj.repairTaskId ? true : false}&docId=${obj.docId || ''}`
				})
			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 90;
			},
			getDetailInfo(id) {
				return new Promise(resolve => {
					hkRepairPlan_getDetails({id,projectId:uni.getStorageSync('isOwner')}).then(res => {
						if(res.success) {
							resolve(res.result)
						}else {
							resolve({})
						}
					})
				})

			},
			/** 确认搜索 */
			confirmSearch() {
			},
			diseaseSplit(obj) {
				this.showModal = true
				this.planRepairDisease = obj.id
			},
			sureSplit() {
				if(this.loading) return
				this.loading = true
				hkDiseaseOrder_diseaseResolution({id:this.planRepairDisease,planRepairDisease:this.id}).then(async res => {
					if(res.success) {
						this.list = this.listToTree(await this.getDetailInfo(this.id))
						// console.log(this.list, '结果')
						this.loading = false
					}
				})
				this.showModal = false
			},
			deleteDiseaseOrder(obj) {
				if(this.loading) return
				this.loading = true
				hkDiseaseOrder_delete({id:obj.id,planRepairDisease:this.id}).then(async res => {
					console.log(res)
					if(res.success) {
						this.$message(res.message)
						this.loading = false
						this.list = this.listToTree(await this.getDetailInfo(this.id))
					}else {
						this.loading = false
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-supervisor {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;

		/* #endif */
		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}

		.form {
			background: #fff;
			// padding-top: 26upx;

			.form-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30upx;
				border-bottom: 1px solid #e2e5ed;

				&:last-of-type {
					border-bottom: none;
				}

				.label {
					color: #445469;
					line-height: 34upx;
					flex-shrink: 0;
					display: flex;
					align-items: center;

					.icon {
						width: 50rpx;
						padding: 6rpx 20rpx;
						clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
						height: 24rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 24rpx;
						background: linear-gradient(90deg, #ff5f2c 0%, #ff9e39 100%);
						text-align: center;
						opacity: 1;
					}
				}

				.form-content {
					color: #22204e;
					display: flex;
					align-items: center;

					.form-btn {
						width: 152rpx;
						height: 60rpx;
						background: #2F80ED;
						border-radius: 8rpx;
						color: #fff;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 60rpx;
						text-align: center;
					}
				}

				.form-text {
					line-height: 58upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 302upx;
				}

				.form-text.none {
					opacity: .7;
					font-size: 30rpx;
				}

				.u-icon {
					margin-left: 40upx;
				}

				.uicon-close-circle-fill {
					margin-left: 32upx;
				}

				.u-input {
					width: 340upx;
					text-align: right;

					::v-deep .u-input__content__field-wrapper {
						margin-right: 24upx;
					}

					::v-deep .uni-input-wrapper {
						text-align: right;
					}
				}

				.u-switch {
					margin-right: 30upx;
				}
			}

			.form-item.none {
				border-bottom: none;
				height: 60upx;
			}

			.form-item.dash {
				border-top: 1px dashed #E0E7F6;
				border-bottom: 1px dashed #E0E7F6;

				&:last-of-type {
					border-bottom: none;
				}
			}


			.no-inline {
				display: block;
				height: auto;

				.label {
					line-height: 100upx;
				}
			}
		}
	}
</style>